<template>
  <div>
    <div class="album">
      <div class="playlist-info">
        <div class="cover">
          <div class="cover-container">
            <button class="play-button">
              <span class="svg-icon">
                <span class="iconfont icon-bofang" />
              </span>
            </button>
            <img
              style="width:288px;height:288px"
              :src="album.picUrl"
            >
          </div>
        </div>
        <div class="info">
          <div class="title">{{ album.name }}</div>
          <div class="artist">Single by <a :href="`https://music.163.com/#/user/home?id=${album.artist.id}`" target="blank">{{ album.artist.name }} </a></div>
          <div class="date-and-count">最后更新于 2022年01月21日 · 112 首歌</div>
          <div class="description" @click="showDialog=true">{{ album.description }}</div>
          <div class="buttons">
            <button class="bule" style="border-radius: 8px; padding: 8px 16px;">
              <span class="iconfont icon-bofang" />
              播放</button>
            <button class="grey">
              <span class="svg-icon">
                <span class="iconfont icon-aixin" />
              </span>
            </button>
            <button class="grey">
              <span class="svg-icon" style="margin-right:0px">
                <span class="iconfont icon-gengduo" />
              </span>
            </button>
          </div>
        </div>
      </div>

      <div v-for="item in album1" :key="item.id" class="track-list">
        <div class="track album">
          <div class="no">
            <span>{{ item.no }}</span>
          </div>
          <div class="title-and-artist">
            <div class="container">
              <div class="title">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="actions">
            <button>
              <span v-if="like" class="svg-icon">
                <span class="iconfont icon-aixin" />
              </span>
              <span v-else class="svg-icon">
                <span class="iconfont icon-aixin1" />
              </span>
            </button>
          </div>
          <div class="time">{{ item.dt |duration }}</div>
        </div>
      </div>

      <div class="extra-info">
        <div class="album-time" />
        <div class="release-date"> 发行于 {{ album.publishTime|time }} </div>
        <div class="copyright"> ©  {{ album.company }} </div>
      </div>

      <div class="more-by">
        <div class="section-title">
          More by        <a href=""> <router-link
            :to="`/artist/${album.artist.id}`"
          >{{ album.artist.name }}
          </router-link>
          </a>
        </div>
        <div>
          <div class="cover-row" style="grid-template-columns: repeat(5, 1fr);gap: 44px 24px;">
            <div v-for="item in moreby" :key="item.id" class="item">
              <div class="cover cover-hover">
                <div class="cover-container">
                  <div class="shade" />
                  <img
                    :src="moreby.album.picUrl"
                    alt=""
                  >
                </div>

              </div>
              <div class="text">
                <div class="title"><a href="/album/86815604">{{ moreby.album.name }}</a></div>
                <div class="info"><span>Album · 2020</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div>
        <el-dialog :visible.sync="showDialog" title="歌单介绍">
          <div class="description-fulltext">{{ album.description }}</div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import { getAlbum } from '@/api/album'

export default {
  filters: {
    duration(val) {
      const m = parseInt(val / 1000 / 60)
      let s = parseInt(val / 1000) % 60
      s = s > 9 ? s : '0' + s
      return `${m}:${s}`
    },
    time(val) {
      const oldtime = new Date(val)
      const y = oldtime.getFullYear()
      let m = oldtime.getMonth()
      m = m > 9 ? m : '0' + m
      let d = oldtime.getDate()
      d = d > 9 ? d : '0' + d
      return `${y}年${m}月${d}日`
    }
  },
  data() {
    return {
      showDialog: false,
      // id: 90731050,
      // id1: 86815604,
      id: this.$route.params.id,
      album: [], // 歌曲详情列表
      album1: [],
      moreby: [],
      title: '',
      description: '',
      limit: 50,
      like: true
    }
  },
  async created() {
    this.getAlbum()
  },
  methods: {
    async getAlbum() {
      const res = await getAlbum({ id: this.id })
      const a = this.album = res.data.album
      this.album1 = res.data.songs
      console.log(res)
      console.log(a)
      const arr = await getAlbum({ id: this.id1 })
      const b = this.moreby = arr.data
      // console.log(arr)
      console.log(b)
    }
  }
}
</script>

<style lang='less' scoped>
.playlist-info{
  display: flex;
  margin-bottom:72px ;
  position: relative;
  .cover{
    position: relative;
    transition:transform .3s;
    .cover-container{
      position: relative;
      &:hover .play-button{
        display: block;
      }
        .play-button{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          color: #ffffff;
          height: 50px;
          width: 50px;
          backdrop-filter: blur(8px);
          background: hsla(0,0%,100%,.14);
          border: 1px solid hsla(0,0%,100%,.08);
          border-radius: 50%;
          cursor: default;
          transition: .2s;
          display: none;
          .svg-icon{
            // height: 44%;
            display: flex;
            justify-content: center;
            align-items: center;
          .icon-bofang{
            font-size: 25px;
          }
          }
        }
      // }
      img{
        border-radius: 0.75em;
        user-select: none;
        aspect-ratio: 1/1;
        border: 1px solid rgba(0,0,0,.04);
      }
      .shadow{
        position: absolute;
        top: 12px;
        height: 100%;
        width: 100%;
        filter: blur(16px) opacity(.6);
        transform: scale(.92,.96);
        z-index: -1;
        background-size: cover;
        border-radius: 0.75em;
        aspect-ratio: 1/1;
      }
    }
  }
  .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex:1;
    margin-left: 56px;
    .title{
      width: 100%;
      font-size: 36px;
      font-weight: 700;
      color:rgb(0, 0, 0);
      .lock-icon {
        opacity: 0.28;
        color: var(--color-text);
        margin-right: 8px;
        .svg-icon {
          height: 26px;
          width: 26px;
        }
      }
    }
    .artist{
      font-size: 18px;
      opacity: .88;
      color: rgb(0, 0, 0);
      margin-top: 24px;
      a{
          text-decoration: none;
          color:rgb(0, 0, 0);
          &:hover{
          text-decoration: underline;
        }
      }
    }
    .date-and-count{
      font-size: 14px;
      opacity: .68;
      color: rgb(0, 0, 0);
      margin-top: 2px;
    }
    .description{
      font-size: 14px;
      opacity: 0.68;
      color: var(--color-text);
      margin-top: 24px;
    //   display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      cursor: pointer;
    }
    .buttons {
      margin-top: 32px;
      display: flex;
      .bule{
        color: #335eea;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        height: 40px;
       width: 92px;
      }
      button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        border: none;
      //  color: #335eea;
       font-weight: bold;
       padding: 8px 16px;
      }
       .bule{
         background-color: rgb(234, 239, 253);
         transition: .2s;
         &:hover{
           transform:scale(1.1, 1.1);
         }
       }
       .grey{
         background-color: #ffffff;
           width: 40px;
           border-radius:8px;
           transition: .2s;
           &:hover{
           transform:scale(1.1, 1.1);
           }
       }
    }
  }
}

.album{
    .el-dialog{
      border-radius: 12px;
    }
}

.description{
        user-select: none;
    font-size: 14px;
    opacity: .68;
    margin-top: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    cursor: pointer;
    white-space: pre-line;
}

.track-list{
    &:hover{
    background-color: #f5f5f7;
    }
}
.track .album{
    height: 32px;
}
.track{
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius:12px;
  user-select: none;
  .no{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius:8px ;
      margin: 0 20px 0 10px;
      width: 12px;
      color: #000;
      cursor: default;
   }
   .title-and-artist{
       flex: 1;
       display: flex;
       .container{
           display: flex;
            flex: 1;
           width: 200px;
           flex-direction: column;
           .title{
               flex: 1;
               font-size: 18px;
               font-weight: 600;
               color: #000;
               cursor: default;
               padding-right: 16px;
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 1;
               overflow: hidden;
               word-break: break-all;
           }
       }
   }
   .actions{
       width: 80px;
       display: flex;
       justify-content: flex-end;
       button{
           display: flex;
           justify-content: center;
           align-items: center;
           padding:8px;
           background:transparent;
           border-radius:25% ;
           transition: transform .2s;
           border:none ;
             &:hover{
             transform:scale(1.2, 1.2);
            }
           .svg-icon{
               height: 16px;
               width: 16px;
               color: #335eea;
           }
       }
   }
}
.description-fulltext {
  font-size: 16px;
  margin-top: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
}

.extra-info {
  margin-top: 36px;
  margin-bottom: 36px;
  font-size: 12px;
  opacity: 0.48;
  color: var(--color-text);
  div {
    margin-bottom: 4px;
  }
  .album-time {
    opacity: 0.68;
  }
}

.more-by {
  border-top: 1px solid rgba(128, 128, 128, 0.18);

  padding-top: 22px;
  .section-title {
    font-size: 22px;
    font-weight: 600;
    opacity: 0.88;
    color: var(--color-text);
    margin-bottom: 20px;
    a{
      color: inherit;
      text-decoration: none;
      &:hover{
       text-decoration: underline;
      }
    }
  }
}

.cover-row {
  display: grid;
  .item {
  color: #000;
    .cover {
     position: relative;
     transition: transform 0.3s;
     .cover-container {
       position: relative;
       .play-button {
         display: flex;
         justify-content: center;
         align-items: center;
         color: white;
         backdrop-filter: blur(8px);
         background: rgba(255, 255, 255, 0.14);
         border: 1px solid rgba(255, 255, 255, 0.08);
         height: 22%;
         width: 22%;
         border-radius: 50%;
         cursor: default;
         transition: 0.2s;
         .svg-icon {
         height: 44%;
         margin-left: 4px;
         }
        &:hover {
        background: rgba(255, 255, 255, 0.28);
        }
       &:active {
       transform: scale(0.94);
       }
      }
      img {
       border-radius: 0.75em;
       width: 100%;
       user-select: none;
       aspect-ratio: 1 / 1;
       border: 1px solid rgba(0, 0, 0, 0.04);
      }
     }
    }
    .cover-hover {
     &:hover {
     cursor: pointer;
    /* transform: scale(1.02); */
   }
  }
  .text {
    margin-top: 8px;
    .title {
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-all;
      a{
        color: #000;
        text-decoration: none;
        &:hover{
          text-decoration: underline;
        }
      }
    }
    .info {
      font-size: 12px;
      opacity: 0.68;
      line-height: 18px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-word;
    }
  }
}

}

</style>
